<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构(Destructuring)
    // 本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

    var zhang = {
        name:"张三",
        class:"2111",
        age:18,
        sex:"男",
        height:"178cm",
        weight:"70kg",
    }
    // var name = zhang.name; //太麻烦


    // 对象解构 (对应键名解构)
    // 对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

    // 1. 对应键名解构(最简单的解构)
    var {name,age,sex,height,weight} = zhang;
    var {sex,height,name,age,weight} = zhang;
    console.log(name,age,sex,height,weight);

    // 2. 自定义变量名
    var {name,age,class:_class,sex,height,weight} = zhang;
    console.log(_class);
    
    var {name:a,age:b,class:c,sex:d,height:e,weight:f} =  {
        name:"张三",
        class:"2111",
        age:18,
        sex:"男",
        height:"178cm",
        weight:"70kg",
    };
    console.log(a,b,c,d,e,f);


    var obj = {a:1 , b:2 , c:3};
    var {a , b, c} = obj;
    console.log(a,b,c);

    var {a , c} = obj;
    console.log(a,c);

    // 如果解构不成功，变量的值就等于undefined。
    var {a,b,c,d} = {a:1,b:2,c:3};
    console.log(a,b,c,d);

    // 在解构过程中,可以设置变量的默认值 (如果取不到就使用默认值 去得到就对应赋值)
    var {a,b,c,d = 0} = {a:1,b:2,c:3,d:null};
    d = d === undefined ? 0 : d;//null和undefined的数值表现相同，因此要用三个等号
    console.log(a,b,c,d);

    // 注意: 对象解构不能解构null 和undefined
    var {a,toFixed,toString} = 1;  // new Number(1)
    console.log(a,toFixed,toString);

    var {a} = null;  // 报错   Cannot destructure property 'a' of 'null' as it is null.
    console.log(a,toFixed,toString);

    // 对于复杂的对象数据 如何解构?    对应键名 解构键值
    var zhang = {
        name:"张三",
        class:"2111",
        age:18,
        sex:"男",
        grade:{
            chinese:55,
            math:66,
            english:77,
        },
        hobby:["唱歌","跳舞","弹钢琴"],
    }
    var {name,class:cls,age,sex,grade:{chinese,math,english},hobby:[a,b,c]} = zhang;
    console.log(name,cls,age);
    console.log(chinese,math,english);
    console.log(a,b,c);
    
</script>
</html>